<template>
    <div>
        <el-button type="primary" @click="handelClick">点击打开弹窗展示子组件的内容</el-button>

        <el-dialog :title="title" v-model="dialogVisible" width="30%" :close-on-click-modal="false" append-to-body
            destroy-on-close @open="open">
            <Child @success="success" @close="close" ref="childRef" :data="data" />
        </el-dialog>
    </div>
</template>

<script setup >
import { ref } from 'vue'
import Child from './components/Child.vue'

const title = ref('展示子组件的内容')
const dialogVisible = ref(false)
const childRef = ref(null)
const data = ref("父组件通过ref来调用子组件的方法,并打印了数据")
function handelClick() {
    dialogVisible.value = true

}

function open() {
    console.log(' childRef.value', childRef.value)
    if (childRef.value) {
        childRef.value.childMehtod()
    }
}
// 子组件传递事件 success
function success(data) {
    console.log('子组件传递事件 success', data)
}
// 子组件传递事件 close
function close() {
    dialogVisible.value = false
    console.log('子组件传递事件 close')
}


</script>

<style lang="less" scoped></style>